<template>
  <div id="eject">
    <div class="nav-input">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="基础信息" name="1">
          <div id="for-input">
            <el-form
              ref="ruleFormA"
              :inline="true"
              :label-position="labelPosition"
              label-width="80px"
              :model="formLabelAlign"
              class="for-content"
              :rules="rules"
            >
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-form-item label="店铺名称" prop="shop_name">
                    <el-input
                      v-model="formLabelAlign.shop_name"
                      :disabled="isBan"
                      size="mini"
                      @blur="verification"
                    />
                  </el-form-item>
                  <el-form-item label="选则用户" prop="username">
                    <el-select
                      v-model="formLabelAlign.username"
                      :disabled="bianji"
                      size="mini"
                      placeholder="请选则用户"
                      @change="hyp(formLabelAlign.username)"
                    >
                      <el-option
                        v-for="item in selectUser"
                        :key="item.id"
                        :label="item.username"
                        :value="item.username"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="所属行业" prop="industry_name">
                    <el-select
                      v-model="formLabelAlign.industry_name"
                      :disabled="isXQ"
                      placeholder="请选择活动区域"
                      size="mini"
                    >
                      <el-option
                        v-for="item in industryList"
                        :key="item.id"
                        :label="item.industry_name"
                        :value="item.industry_name"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="身份证号" prop="id_card">
                    <el-input
                      v-model="formLabelAlign.id_card"
                      :disabled="isXQ"
                      size="mini"
                    />
                  </el-form-item>
                  <el-form-item class="business-hours" label="营业时间">
                    <el-time-select
                      v-model="formLabelAlign.bus_hrs.sta_time"
                      :disabled="isXQ"
                      placeholder="起始时间"
                      size="mini"
                      :picker-options="{
                        start: '06:30',
                        step: '00:15',
                        end: '18:30',
                      }"
                    />
                    <el-time-select
                      v-model="formLabelAlign.bus_hrs.end_time"
                      :disabled="isXQ"
                      placeholder="结束时间"
                      size="mini"
                      :picker-options="{
                        start: '06:30',
                        step: '00:15',
                        end: '24:00',
                        minTime: formLabelAlign.startTime,
                      }"
                    />
                  </el-form-item>

                  <el-form-item label="经营方式">
                    <el-radio
                      v-model="formLabelAlign.bus_model"
                      :disabled="isXQ"
                      label="独立经营"
                    >独立经营</el-radio>
                    <el-radio
                      v-model="formLabelAlign.bus_model"
                      :disabled="isXQ"
                      label="共享经营"
                    >共享经营</el-radio>
                  </el-form-item>
                  <el-form-item label="主要产品">
                    <upload-img />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="店铺头像:">
                    <upload-img :is-x-q="isXQ" :shop_avatar="formLabelAlign.shop_avatar" @img_upload="img_upload" />
                  </el-form-item>
                  <el-form-item label="营业执照:">
                    <upload-img />
                  </el-form-item>
                  <el-form-item label="上传证件:">
                    <upload-img />
                  </el-form-item>
                  <el-form-item label="店铺实拍:">
                    <upload-img />
                  </el-form-item>
                  <el-form-item label="地址选点:" class="address">
                    <v-distpicker
                      :disabled="isXQ"
                      :province="formLabelAlign.area_addr.province"
                      :city="formLabelAlign.area_addr.city"
                      :area="formLabelAlign.area_addr.area"
                      @province="onChangeProvince"
                      @city="onChangeCity"
                      @area="onChangeArea"
                    />
                  </el-form-item>
                  <el-form-item label="详细地址:" prop="addr">
                    <el-input
                      v-model="formLabelAlign.addr"
                      :disabled="isXQ"
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
        <el-collapse-item title="配送方式" name="2">
          <!----------------------下面表单 ------------------------------------>

          <div id="delivery-input">
            <!-- 左侧表单 -->
            <el-form
              ref="formDelivery"
              :inline="true"
              :rules="rules"
              :label-position="labelPosition"
              label-width="80px"
              :model="formLabelAlign"
              class="for-content"
            >
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-form-item label="是否到店">
                    <el-radio
                      v-model="formLabelAlign.to_shop"
                      :disabled="isXQ"
                      :label="true"
                    >是</el-radio>
                    <el-radio
                      v-model="formLabelAlign.to_shop"
                      :label="false"
                    >否</el-radio>
                  </el-form-item>

                  <el-form-item label="是否支持同城配送">
                    <el-radio
                      v-model="formLabelAlign.city_delivery.stand_by"
                      :disabled="isXQ"
                      :label="true"
                    >是</el-radio>
                    <el-radio
                      v-model="formLabelAlign.city_delivery.stand_by"
                      :disabled="isXQ"
                      :label="false"
                    >否</el-radio>
                  </el-form-item>
                  <el-form-item
                    label="起配费用:"
                    prop="city_delivery.min_fee"
                    :rules="[
                      {
                        required: true,
                        message: '请输入起配费用',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      v-model="formLabelAlign.city_delivery.min_fee"
                      size="mini"
                      :disabled="isDisableA"
                    />
                  </el-form-item>
                  <el-form-item
                    label="每公里/元:"
                    prop="city_delivery.unit_prc"
                    :rules="[
                      {
                        required: true,
                        message: '请输入每公里/元',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      v-model="formLabelAlign.city_delivery.unit_prc"
                      size="mini"
                      :disabled="isDisableA"
                    />
                  </el-form-item>
                  <el-form-item class="business-hours" label="配送时间">
                    <el-time-select
                      v-model="
                        formLabelAlign.city_delivery.delivery_tm.sta_time
                      "
                      :disabled="isDisableA"
                      placeholder="起始时间"
                      size="mini"
                      :picker-options="{
                        start: '06:30',
                        step: '00:15',
                        end: '18:30',
                      }"
                    />
                    <el-time-select
                      v-model="
                        formLabelAlign.city_delivery.delivery_tm.end_time
                      "
                      :disabled="isDisableA"
                      placeholder="结束时间"
                      size="mini"
                      :picker-options="{
                        start: '06:30',
                        step: '00:15',
                        end: '24:00',
                        minTime:
                          formLabelAlign.city_delivery.delivery_tm.sta_time,
                      }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <!-- 右侧表单 -->
                  <el-form-item label="是否支持区域配送">
                    <el-radio
                      v-model="formLabelAlign.rgnl_delivery.stand_by"
                      :disabled="isXQ"
                      :label="true"
                    >是</el-radio>
                    <el-radio
                      v-model="formLabelAlign.rgnl_delivery.stand_by"
                      :disabled="isXQ"
                      :label="false"
                    >否</el-radio>
                  </el-form-item>
                  <el-form-item
                    label="起配费用:"
                    prop="rgnl_delivery.min_fee"
                    :rules="[{ required: true, message: '配送费不能为空' }]"
                  >
                    <el-input
                      v-model="formLabelAlign.rgnl_delivery.min_fee"
                      :disabled="isDisableB"
                      size="mini"
                    />
                  </el-form-item>
                  <el-form-item
                    label="每公里/元:"
                    prop="rgnl_delivery.unit_prc"
                    :rules="[{ required: true, message: '配送费不能为空' }]"
                  >
                    <el-input
                      v-model="formLabelAlign.rgnl_delivery.unit_prc"
                      :disabled="isDisableB"
                      size="mini"
                    />
                  </el-form-item>
                  <el-form-item
                    :disabled="isDisableB"
                    label="配送范围/公里:"
                    prop="rgnl_delivery.delivery_area"
                    :rules="[
                      {
                        required: true,
                        message: '请选择活动区域',
                        trigger: 'change',
                      },
                    ]"
                  >
                    <el-select
                      v-model="formLabelAlign.rgnl_delivery.delivery_area"
                      :disabled="isDisableB"
                      placeholder="请选择公里数"
                      size="mini"
                    >
                      <el-option
                        v-for="item in 10"
                        :key="item"
                        :label="item + '公里'"
                        :value="item + '公里'"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item
                    label="跨域每公里/元:"
                    prop="rgnl_delivery.rgnl_unit_prc"
                    :rules="[
                      {
                        required: true,
                        message: '请输入活动名称',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      v-model="formLabelAlign.rgnl_delivery.rgnl_unit_prc"
                      :disabled="isDisableB"
                      size="mini"
                    />
                  </el-form-item>
                  <el-form-item class="business-hours" label="配送时间">
                    <el-time-select
                      v-model="
                        formLabelAlign.rgnl_delivery.delivery_tm.sta_time
                      "
                      :disabled="isDisableB"
                      placeholder="起始时间"
                      size="mini"
                      :picker-options="{
                        start: '06:30',
                        step: '00:15',
                        end: '18:30',
                      }"
                    />
                    <el-time-select
                      v-model="
                        formLabelAlign.rgnl_delivery.delivery_tm.end_time
                      "
                      placeholder="结束时间"
                      :disabled="isDisableB"
                      size="mini"
                      :picker-options="{
                        start: '06:30',
                        step: '00:15',
                        end: '24:00',
                        minTime:
                          formLabelAlign.rgnl_delivery.delivery_tm.sta_time,
                      }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import UploadImg from './UploadImg.vue'
// 地址选择

import VDistpicker from 'v-distpicker'
import { user, prove, shop_xxx } from '../../../api/shopList'
import { mapGetters } from 'vuex'
export default {
  components: { UploadImg, VDistpicker },
  data() {
    var validatePass2 = (rule, value, callback) => {
      var id = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/
      function cardtest(idCard) {
        if (id.test(idCard) === true) return idCard
        return callback('身份证号码错误')
      }
      cardtest(value)
    }
    return {
      activeNames: ['1', '2'],
      // 编辑
      bianji: false,
      // 是否打开过此组件
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      isName: false,
      isBan: true,
      labelPosition: 'left',
      selectUser: [],
      formLabelAlign: {
        shop_name: '', // 商铺名称
        industry_name: '', // 所属行业
        username: '', // 选中用户
        id_card: '', // 身份证号
        email: '', // 注册邮箱
        bus_hrs: {
          // 营业时间
          sta_time: '', // 开始时间
          end_time: '' // 结束时间
        },

        bus_model: '独立经营', // 经营模式
        main_products: '', // 主要产品
        addr: '', // 地址
        area_addr: {
          // 区域地址
          province: '湖南省',
          city: '长沙市',
          area: '岳麓区'
        },
        shop_avatar: '', // 店铺头像
        bus_lic: '', // 营业执照
        id_photo: '', // 证件照
        shop_photo: '', // 店铺实拍
        sts: '', // 状态(空值表示未查看;已拒绝用rejected;已通过用passed)
        remarks: '', // 备注
        to_shop: true, // 默认不支持:false;支持为true
        city_delivery: {
          // 同城区域配送
          stand_by: false, // 默认不支持:false;支持为true
          min_fee: '', // 最低配送费用
          unit_prc: '', // 每公里多少钱
          delivery_tm: {
            sta_time: '', // 开始时间
            end_time: '' // 结束时间
          }
        },

        rgnl_delivery: {
          stand_by: false, // 默认不支持:false;支持为true
          min_fee: '', // 最低配送费用
          unit_prc: '', // 每公里多少钱
          delivery_area: '', // 配送范围
          rgnl_unit_prc: '', // 跨域每公里多少钱
          delivery_tm: {
            sta_time: '', // 开始时间
            end_time: '' // 结束时间
          }
        }
      },

      // b表
      isDisableA: true,
      isDisableB: true,

      // 表单效验
      rules: {
        shop_name: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入店铺名称', trigger: 'change' }
        ],
        branchName: [
          { required: true, message: '请输入分店名称', trigger: 'blur' }
        ],
        industry_name: [
          { required: true, message: '请输入所属行业', trigger: 'blur' }
        ],
        id_card: [
          { required: true, message: '请输身份证号', trigger: 'blur' }
          // { validator: validatePass2, trigger: 'blur' }
        ],
        addr: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],

        // ---------------------------表2验证规则
        Acost: [{ required: true, message: '请选择起配费用', trigger: 'blur' }],
        Akilometre: [
          { required: true, message: '请选择起配费用', trigger: 'blur' }
        ],

        // 区域配送验证规则
        Bcost: [{ required: true, message: '请选择起配费用', trigger: 'blur' }],
        BperKilometer: [
          { required: true, message: '请选择每公里/元', trigger: 'blur' }
        ],
        Bkilometre: [
          { required: true, message: '请选择配送公里', trigger: 'change' }
        ],
        BregionCost: [
          { required: true, message: '请输入跨域每公里金额', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isageA() {
      return this.formLabelAlign.city_delivery.stand_by
    },
    isageB() {
      return this.formLabelAlign.rgnl_delivery.stand_by
    },
    ...mapGetters(['industryList', 'isXQ'])
  },
  watch: {
    formLabelAlign: {
      handler: function() {
        this.$store.commit('shopsList/fromValue', this.formLabelAlign)
      },
      deep: true
    },

    isageA(value) {
      if (value === false) {
        this.isRequiredA()
        this.isDisableA = true
      } else {
        this.RequiredA()
        this.isDisableA = false
      }
    },
    isageB(value) {
      if (value === false) {
        this.isDisableB = true
        this.isRequiredB()
      } else {
        this.RequiredB()
        this.isDisableB = false
      }
    }
  },
  created() {
    this.init_user()
  },
  methods: {

    img_upload(res) {
      this.formLabelAlign.shop_avatar = res
    },
    isAdd() {
      this.isBan = true
    },
    pathEdit(value) {
      // 编辑
      this.isBan = true
      this.bianji = false
      shop_xxx(value).then((res) => {
        this.formLabelAlign = res.data
      }).then(res => {
        if (this.formLabelAlign.rgnl_delivery.stand_by) {
          this.isDisableB = false
        }
      })
    },
    pathEdit2(value) {
      // 详情
      this.isBan = true
      this.bianji = true

      shop_xxx(value).then((res) => {
        this.formLabelAlign = res.data
      }).then(res => {
        this.isDisableB = true
      })
    },
    onSubmit() {
      console.log('submit!')
    },
    // 展开面板
    handleChange(val) {
      // console.log(val)
    },

    // -----------------------------------

    onChangeProvince(value) {
      this.formLabelAlign.area_addr.province = value.value
    },
    onChangeCity(value) {
      this.formLabelAlign.area_addr.city = value.value
    },
    onChangeArea(value) {
      this.formLabelAlign.area_addr.area = value.value
    },
    hyp(value) {
      this.isBan = false
      const a = this.selectUser.filter((item) => {
        return item.username === value
      })[0]
      this.formLabelAlign.userid = a.id
      this.formLabelAlign.email = a.email
      this.formLabelAlign.mobile = a.mobile
      this.formLabelAlign.userImg = a.userImg
    },
    async init_user() {
      const { data: data } = await user()
      this.selectUser = data
    },
    // 表单验证
    verification() {
      prove().then((res) => {
        res.data.forEach((item) => {
          if (item.userid === this.formLabelAlign.userid) {
            if (item.shop_name === this.formLabelAlign.shop_name) {
              if (!this.bianji) {
                this.$message.error('该店铺名已存在')
                this.$store.commit('shopsList/flageName', false)
              } else {
                this.$store.commit('shopsList/flageName', true)
              }
            } else {
              this.$store.commit('shopsList/flageName', true)
            }
          }
        })
        //  console.log(name);
      })
    },
    isRequiredA() {
      this.rules.Acost[0].required = false
      this.rules.Akilometre[0].required = false
    },
    RequiredA() {
      this.rules.Acost[0].required = true
      this.rules.Akilometre[0].required = true
    },
    isRequiredB() {
      this.rules.Bcost[0].required = false
      this.rules.BperKilometer[0].required = false
      this.rules.Bkilometre[0].required = false
      this.rules.BregionCost[0].required = false
    },
    RequiredB() {
      this.rules.Bcost[0].required = true
      this.rules.BperKilometer[0].required = true
      this.rules.Bkilometre[0].required = true
      this.rules.BregionCost[0].required = true
    }
  }
//   computed: {
//     isageA() {
//       return this.formLabelAlign.city_delivery.stand_by
//     },
//     isageB() {
//       return this.formLabelAlign.rgnl_delivery.stand_by
//     },
//     ...mapGetters(['industryList', 'isXQ'])
//   }
}
</script>
<style scoped>
#eject /deep/.el-collapse-item__header {
  padding: 0 20px;
  background-color: rgba(233, 233, 233, 1);
}
.nav-input /deep/ .el-collapse {
  border: 1px solid rgba(233, 233, 233, 1);
}
.nav-input /deep/ .el-collapse-item__content {
  padding: 0 20px;
}
#for-input .for-content {
  padding-top: 50px;
}
#for-input /deep/ .el-input__inner {
  width: 273px;
}
.business-hours {
  display: flex;
}
#for-input /deep/ .el-date-editor .el-input__inner {
  width: 65%;
}
#for-input /deep/ .el-form-item {
  width: 100%;
}
#for-input /deep/ .el-form-item__label {
  white-space: nowrap;
}
#for-input /deep/ .business-hours .el-date-editor--time-select {
  width: 50%;
}
.distpicker-address-wrapper {
  display: flex;
}
.address {
  display: flex;
}
#for-input /deep/ .distpicker-address-wrapper select {
  height: 28px;
  padding: 0;
  margin: 0 5px;
}
#delivery-input .for-content {
  padding-top: 50px;
}
#delivery-input /deep/ .el-input__inner {
  width: 273px;
}
.business-hours {
  display: flex;
}
#delivery-input /deep/ .el-date-editor .el-input__inner {
  width: 65%;
}
#delivery-input /deep/ .el-form-item {
  width: 100%;
}
#delivery-input /deep/ .el-form-item__label {
  /* width: 40% !important; */
  width: auto !important;
  white-space: nowrap;
}

#delivery-input /deep/ .business-hours .el-date-editor--time-select {
  width: 50%;
}
.distpicker-address-wrapper {
  display: flex;
}
.address {
  display: flex;
}
#delivery-input /deep/ .distpicker-address-wrapper select {
  height: 28px;
  padding: 0;
  margin: 0 5px;
}
</style>

